.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-inline {
  display: inline-flex;
  flex-direction: row;
}
.flex-none {
  flex: none;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
// 水平居中
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
// 整体集中
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-shrink-0 {
  flex-shrink: 0;
}

// 换行
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
// 副轴对齐方式
.col-top {
  align-items: flex-start;
}
.col-center {
  align-items: center;
}
.col-bottom {
  align-items: flex-end;
}
.col-stretch {
  align-items: stretch;
}
.col-baseline {
  align-items: baseline;
}

// 主轴对齐方式
.row-left {
  justify-content: flex-start;
}
.row-center {
  justify-content: center;
}
.row-right {
  justify-content: flex-end;
}
.row-between {
  justify-content: space-between;
}
.row-around {
  justify-content: space-around;
}
// 定义gap等分
@for $i from 1 through 50 {
  @if $i % 2 == 0 or $i % 5 == 0 {
    .gap-#{$i} {
      gap: $i + px;
    }
  }
}

// 定义flex等分
@for $i from 0 through 12 {
  .flex-#{$i} {
    flex: $i;
  }
  .grid-#{$i} {
    display: grid;
    grid-template-columns: repeat($i, 1fr);
  }
}

/* 隐藏类：在指定屏幕下隐藏元素 */
.hide-xs {
  @media (max-width: var(--breakpoint-xs)) {
    display: none !important;
  }
}
.hide-sm {
  @media (max-width: var(--breakpoint-sm)) {
    display: none !important;
  }
}
.hide-md {
  @media (max-width: var(--breakpoint-md)) {
    display: none !important;
  }
}
.hide-lg {
  @media (max-width: var(--breakpoint-lg)) {
    display: none !important;
  }
}
.hide-xl {
  @media (max-width: var(--breakpoint-xl)) {
    display: none !important;
  }
}

/* 显示类：仅在指定屏幕下显示元素 */
.show-xs {
  display: none !important;
  @media (max-width: var(--breakpoint-xs)) {
    display: block !important;
  }
}
.show-sm {
  display: none !important;
  @media (max-width: var(--breakpoint-sm)) {
    display: block !important;
  }
}
.show-md {
  display: none !important;
  @media (max-width: var(--breakpoint-md)) {
    display: block !important;
  }
}
.show-lg {
  display: none !important;
  @media (max-width: var(--breakpoint-lg)) {
    display: block !important;
  }
}
.show-xl {
  display: none !important;
  @media (max-width: var(--breakpoint-xl)) {
    display: block !important;
  }
}
